<template>
  <div class="all">
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      :title="name"
      :right-text="text"
      left-arrow
      @click-left="back"
      @click-right="complaint"
    />
    <div ref="content" class="bigbox">
      <div v-for="(item, index) in imList" :key="index" class="chatbox">
        <div>
          <div class="time">
            <span>{{ item.time }}</span>
          </div>
          <div class="chatcontent">
            <div class="head">
              <van-image
                v-show="item.send_uid == sendId"
                round
                width="50px"
                height="50px"
                :src="item.avatar"
              />
            </div>
            <div class="chattwo">{{ item.content }}</div>
            <div class="head">
              <van-image
                v-show="item.send_uid != sendId"
                round
                width="50px"
                height="50px"
                :src="item.avatar"
              />
            </div>
          </div>
          <div
            v-show="item.get_uid != 1 && item.get_uid == sendId"
            class="call"
          >
            <span
              >对方未回复？可以电话联系TA<span
                class="callnum"
                @click="virtualcall"
                >拨打电话</span
              ></span
            >
          </div>
          <div
            v-show="item.get_uid != 1 && item.get_uid == sendId"
            class="call"
          >
            <span>该座机号码为隐私号码请放心拨打</span>
          </div>
        </div>
      </div>
      <div ref="move" />
    </div>
    <div class="slot"></div>
    <div class="sendchat">
      <input
        v-model="sendwords"
        type="text"
        placeholder="请输入您想要的说的话"
      />
      <button @click="send">发送</button>
    </div>
    <div class="safe" />
  </div>
</template>

<script>
import { virtualNum } from "../../apis/user";
import { _local } from "@/utils/storage";

export default {
  data() {
    return {
      num: "",
      sendId: 0,
      imList: [],
      text: "举报",
      name: "在线聊天",
      sendwords: "",
      targetId: "",
      conversation: {},
      list: [],
      dialogVisible: false,
      messageid: "",
      sentTime: 0,
      hasMore: false,
      talk: true,
      avatar: "",
      imUser: {},
    };
  },
  created() {
    const _this = this;
    _this.targetId = _this.$route.query.targetId;
    _this.sendId = _this.$route.query.sendId;
    _this.imUser = _local.get("imUser");
    if (!_this.targetId) {
      _this.getConversationId();
    } else {
      _this.getImList();
    }
    _this.$global.ws.onmessage = function (e) {
      console.log(e.data);
      let msg = JSON.parse(e.data);
      if (msg.type == "login") {
        fetch(`${_this.$imUrl}/im/bind`, {
          method: "POST",
          headers: {
            "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
            token: _this.imUser.imToken,
          },
          body: `client_id=${msg.client_id}`,
        })
          .then((res) => res.json())
          .then((res) => {
            console.log("绑定", res);
            _this.$store.dispatch("im/setUnReadCount", {
              unReadCount: _local.get("unReadCount") || res.data.no_read_all,
            });
          });
      } else if (msg.type == "say" && msg.content) {
        _this.getImList();
      } else if (msg.type == "say") {
        _local.set("unReadCount", msg.no_read_all);
        _this.$store.dispatch("im/setUnReadCount", {
          unReadCount: msg.no_read_all,
        });
      }
    };
  },
  beforeUpdate() {
    setTimeout(() => {
      this.$refs.content.scrollTop = 100000000000;
    }, 0);
  },
  methods: {
    getConversationId() {
      const _this = this;
      fetch(`${_this.$imUrl}/im/get_conversation_id`, {
        method: "POST",
        headers: {
          "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
          token: _this.imUser.imToken,
        },
        body: `to_uid=${_this.sendId}`,
      })
        .then((res) => res.json())
        .then((res) => {
          console.log("getConversationId", res);
          if (res.code == 200 || res.code == 201) {
            _this.targetId = res.data.conversation_id;
            _this.getImList();
          }
        });
    },
    getImList() {
      const _this = this;
      fetch(`${_this.$imUrl}/im/read_conversation`, {
        method: "POST",
        headers: {
          "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
          token: _this.imUser.imToken,
        },
        body: `conversation_id=${_this.targetId}`,
      })
        .then((res) => res.json())
        .then((res) => {
          console.log("getImList", res);
          if (res.code == 200 || res.code == 201) {
            _this.imList = res.data.list;
            _this.num = res.data.mobile;
          }
        });
    },
    back() {
      this.$router.go(-1);
    },
    complaint() {
      this.$router.push({ path: "/complaint" });
    },
    virtualcall() {
      window.location.href = `tel:${this.num}`;
      console.log(this.num)
    },
    send() {
      const _this = this;
      if (_this.sendwords.trim() != "") {
        fetch(`${_this.$imUrl}/im/send`, {
          method: "POST",
          headers: {
            "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
            token: _this.imUser.imToken,
          },
          body: `to_uid=${_this.sendId}&content=${_this.sendwords}`,
        })
          .then((res) => res.json())
          .then((res) => {
            console.log("send", res);
            if (res.code == 200 || res.code == 201) {
              _this.getImList();
              _this.sendwords = "";
            } else {
              _this.$toast(res.msg);
            }
          });
      } else {
        _this.$toast("请输入发送内容");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.slot {
  height: 80px;
}
.all {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f2f2f2 !important;
}
.bigbox {
  padding-top: 15px;
  overflow-y: scroll;
  flex: 1;
  .time {
    text-align: center;
    span {
      // background-color: #cdcdcd;
      display: inline-block;
      color: #cdcdcd;
      font-size: 13px;
      padding: 2px 7px;
      border-radius: 10px;
    }
  }
  .chatcontent {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 10px 15px;
    .head {
      width: 50px;
    }
    .chattwo {
      box-sizing: border-box;
      font-size: 15px;
      width: 60%;
      background-color: #fff;
      padding: 10px 20px;
      word-wrap: break-word;
      word-break: break-all;
      overflow: hidden;
    }
  }
  .call {
    font-size: 13px;
    text-align: center;
    padding-bottom: 10px;
    > span {
      display: inline-block;
      padding: 0px 4px;
      color: #fff;
      background-color: #ccc;
      .callnum {
        margin-left: 3px;
        color: #45b7cb;
      }
    }
  }
}

.sendchat {
  position: fixed;
  bottom: 0;
  width: 100vw;
  display: flex;
  justify-content: space-evenly;
  padding: 15px;
  background-color: #f6f6f6;
  input {
    border: none;
    padding-left: 10px;
    color: #333;
    font-size: 14px;
    width: 60%;
    height: 33px;
  }
  button {
    width: 60px;
    height: 33px;
    border-radius: 16px;
    font-size: 14px;
    background-color: #45b7cb;
    color: #fff;
    border: none;
  }
}
.safe {
  background-color: #f6f6f6;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
</style>
